<template>
  <div id="app">
      <div class="box">
          <div class="box-top"></div>
          <div class="table">
              <div class="header">
                  <span class="head-sp1">饮品与小食订单</span>
                  <span class="head-sp2">自提/外送</span>
                  <span class="head-sp3" @click="qing">清空</span>
                  <span class="iconfont icon-huishouzhan"></span>
              </div>
              <div class="tbody">
                  <div class="tbody-box" v-for="(good,idx) in goods" :key ="good.id">
                      <div class="checkbox">
                            <van-checkbox v-model="good.checked" class="checbox"></van-checkbox>
                      </div>
                      <div class="imgs">
                          <img :src="good.goodsImg">
                      </div>
                      <div class="tbody-txt">
                          <p class="text-op1">生椰拿铁</p>
                          <p class="text-op2">冰/不另外加糖</p>
                          <p class="text-op3">
                              <span class="popo-sp1">¥<span class="popo-sp2">{{good.price}}</span></span>
                              <del class="popo-de1">¥<del class="popo-de2">{{good.total}}</del></del>
                          </p>
                          <span class="biaoji">冲4赠3</span>
                      </div>
                      <div class="jishu">
                          <span class="iconfont icon-jian3" @click="jian(idx)"></span>
                          <span class="shuzi">{{good.number}}</span>
                          <span class="iconfont icon-jia1" @click="jia(idx)"></span>
                      </div>
                  </div>
              </div>
              <div class="footers">
                  <p class="heji">合计<span class="he-sp1">¥<span class="he-sp2">{{zongjia()}}</span></span>
                  <del class="he-de1">¥<del class="he-de2">{{hightjia()}}</del></del></p>
                  <div class="jiesuan">
                      <p class="jiesuan">
                          优惠后￥<span>{{zongjia()}}</span>元，去结算
                      </p>
                      <p class="youhui">
                          已享受更低优惠，优惠后共减免￥<span>{{hightjia()-zongjia()}}</span>
                      </p>
                  </div>
              </div>
          </div>
          <div class="kon">
              <div class="kon-img">
                  <img src="../assets/a3.jpg">
              </div>
              <p class="kon-lone">您的购物车有点寂寞</p>
              <div class="kon-txt" @click="hebei">
                  去喝一杯
              </div>
          </div>
      </div>
      <van-dialog 
      v-model="show"
       title="确定不要了吗？" 
       class="dialog" 
       show-cancel-button
        @confirm="shan"
       >
        </van-dialog>
        <van-dialog 
      v-model="spre"
       title="确定不要了吗？" 
       class="dialog" 
       show-cancel-button
        @confirm="shanchu"
       >
        </van-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
            show:false,
            spre:false,
            checked: true,
            goods:[]
        };
  },
  created(){
        axios({
            url:"/api/cart/cartIterm",
            params:{
                uid:3
        }
        })
            .then(res=>{
                this.goods = res.data
                console.log("res.data",res.data);
                console.log('this.goods',this.goods);
                this.$root.parMsg = this.goods.length
        });
    },
  methods:{
      jian(index){
          if(this.goods[index].number<=1){
              this.show = true
              this.goods[index].number=1
              return
          }
          this.goods[index].number--
      },
      shan(){
          this.goods.splice(0,1) 
       },
      jia(index){
          this.goods[index].number++
      },
      zongjia(){
          let sum = 0;
          this.goods.forEach(goode=>{
              if (goode.checked==true) {
                  sum+=goode.number*goode.price
              }
          })
          return sum
      },
      hightjia(){
          let str = 0;
          this.goods.forEach(goode=>{
              if (goode.checked==true) {
                  str+=goode.number*goode.total
              }
          })
          return str
      },
      qing(){
          this.spre=true
      },
      shanchu(){
          var oTable = document.querySelector('.table');
          var oKon = document.querySelector('.kon');
          this.goods.splice(0)
          oTable.style.display = 'none';
          oKon.style.display = 'block'
      },
      hebei(){
          this.$router.push("/Caidan")
      }
  },
    
  mounted(){
      this.created()
    var oTable = document.querySelector('.table');
    var oKon = document.querySelector('.kon')
    if(this.goods.length<=0){
        oTable.style.display = 'none';
        oKon.style.display = 'block'
    }
  },

//   mounted(){
//     //   var oCheck = document.querySelectorAll('.checbox')
//       var oSp2 = document.querySelector('.he-sp2')
//       console.log('oSp2',oSp2);
//         var oShuzi = document.querySelectorAll('.shuzi');
//     //   var oPopo2 = document.querySelectorAll('.popo-sp2')
//       var sum = 0;
//       oShuzi.forEach((index,item)=>{
//           if(this.goods.checked==true){
//               sum += parseInt(item.innerHTML)
//           }
//       })
//       console.log('sum',sum);
//     oSp2.innerHTML =sum
//   }
}
</script>

<style scoped>
@import url("../assets/font-footer/iconfont.css");
    
    .box .box-top{
        width: 3.6rem;
        height: 0.48rem;
        background-color: #3b409e;
    }
    .box .table{
        width: 3.4rem;
        display: block;
        border-radius: 0.1rem;
        background-color: #fff;
        margin: auto;
        position: relative;
        top:-0.32rem
    }
    .table .header{
        height: 0.4rem;
        width: 3.2rem;
        margin: 0 0.1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    .header .head-sp1{
        display: block;
        font-size: 0.12rem;
        float: left;
        margin-top: 0.13rem;
    }
    .header .head-sp2{
        display: block;
        font-size: 0.09rem;
        float: left;
        background-color: #e8eaf3;
        border-radius: 0.02rem;
        color: #8a94b1;
        margin-top: 0.15rem;
        margin-left: 0.05rem;
    }
    .header .head-sp3{
        display: block;
        float: right;
        font-size: 0.13rem;
        margin: 0.13rem 0.05rem 0 0.05rem;
        color: #6d6d6d;
    }
    .header .icon-huishouzhan{
        display: block;
        float: right;
        font-size: 0.14rem;
        color: #b1b1b1;
        margin-top: 0.15rem;
    }
    .table .tbody{
        width: 3.4rem;
    }
    .tbody .tbody-box{
        width: 100%;
        height: 0.56rem;
        padding: 0.14rem 0;
    }
    .tbody-box .checkbox{
        width: 0.38rem;
        height: 0.56rem;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* .checkbox input{
        display: block;
        width: 0.2rem;
        height: 0.2rem;
        margin: 0.18rem auto 0;
    } */
    .tbody-box .imgs{
        width: 0.56rem;
        height: 0.56rem;
        float: left;
    }
    .imgs img{
        width: 100%;
        height: 100%;
    }
    .tbody-box .tbody-txt{
        width: 1.3rem;
        height: 0.56rem;
        float: left;
        margin-left: 0.08rem;
        position: relative;
    }
    .tbody-txt .text-op1{
        font-size: 0.16rem;
        margin-top: 0.02rem;
    }
    .tbody-txt .text-op2{
        font-size: 0.1rem;
        margin: 0.04rem 0;
    }
    .tbody-txt .text-op3{
        font-size: 0.12rem;
    }
    .tbody-txt .text-op3 .popo-sp1{
        font-size: 0.11rem;
        color: #ef3421;
        margin-right: 0.1rem;
    }
    .tbody-txt .text-op3 .popo-de1{
        font-size: 0.09rem;
        color: #919191;
        text-decoration: line-through;
    }
    .tbody-txt .biaoji{
        position: absolute;
        width: 0.31rem;
        height: 0.12rem;
        font-size: 0.08rem;
        color: #fff;
        background-color: #ff4908;
        border-radius: 0.02rem;
        text-align: center;
        line-height: 0.12rem;
        top: 0.06rem;
        left: 0.64rem;
    }
    .tbody-box .jishu{
        width: 0.7rem;
        height: 0.2rem;
        float: right;
        margin: 0.36rem 0.12rem 0 0;
        display: flex;
        justify-content: space-between;
    }
    .jishu .icon-jian3,.jishu .icon-jia1{
        font-size: 0.2rem;
        color: #241f86;
    }
    .jishu .shuzi{
        display: block;
        width: 0.2rem;
        line-height: 0.2rem;
        text-align: center;
        font-size: 0.14rem;
    }
    .table .footers{
        width: 3.4rem;
        height: 0.72rem;
        border-top: 1px solid #f2f2f0;
    }
    .table .fixd{
        position: fixed;
        bottom: 1rem;
    }
    .footers .heji{
        float: left;
        width: 0.85rem;
        height: 0.14rem;
        margin: 0.22rem 0 0 0.1rem;
        font-size: 0.14rem;
    }
    .heji .he-sp1{
        font-size: 0.11rem;
        margin: 0 0.04rem;
    }
    .heji .he-de1{
        font-size: 0.08rem;
        text-decoration: line-through;
        color: #9a9a9a;
    }
    .footers .jiesuan{
        width: 1.76rem;
        height: 0.72rem;
        float: right;
    }
    .jiesuan .jiesuan{
        width: 1.46rem;
        height: 0.34rem;
        border-radius: 0.17rem;
        background-color: #ec4f04;
        font-size: 0.13rem;
        text-align: center;
        line-height: 0.34rem;
        color: #fff;
        margin: 0.12rem 0.14rem 0 0;
    }
    .jiesuan .youhui{
        width: 1.6rem;
        height: 0.11rem;
        font-size: 0.09rem;
        color: #ce491d;
        border: 2px solid #e1cebd;
        line-height: 0.11rem;
        text-align: center;
        margin-top: 0.5rem;
        margin-right: 0.14rem;
        border-radius: 0.02rem;
    }
    .kon{
        width: 100%;
        height: 3.1rem;
        background-color: #fff;
        display: none;
    }
    .kon .kon-img{
        width: 1.7rem;
        height: 1.48rem;
        margin: auto;
        padding-top: 0.5rem;
    }
    .kon-img>img{
        width: 100%;
        height: 100%;
    }
    .kon .kon-lone{
        width: 1.2rem;
        height: 0.14rem;
        margin: 0.16rem auto 0.21rem;
        font-size: 0.13rem;
    }
    .kon .kon-txt{
        width: 1.32rem;
        height: 0.37rem;
        font-size: 0.14rem;
        color: #6374a7;
        border: 2px solid #9e9ccd;
        border-radius: 0.18rem;
        text-align: center;
        line-height: 0.37rem;
        margin: auto;
    }
</style>